import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import Taro, { useReachBottom } from '@tarojs/taro'
import { AtCard, AtTag } from 'taro-ui'
import { request, baseURL } from '../../utils/request'
import { useRequest } from 'ahooks'
import styles from './index.module.less'

const getActivityFunc = (page: number) => {
  return request('get', '/app/baiye', { page, size: 10 })
}

const ActivityList: React.FC<{}> = () => {
  const [data, setData] = useState([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const getActivity = useRequest(getActivityFunc, {
    manual: true,
    onSuccess: d => {
      // @ts-ignore
      setData([...data, ...d.data])
      // @ts-ignore
      setTotal(d.total)
    }
  })
  useReachBottom(() => {
    if (total === data.length) {
      Taro.showToast({
        title: "已全部加载",
        icon: 'none'
      })
      return
    }
    setPage(page + 1)
  })
  useEffect(() => {
    getActivity.run(page)
  }, [])
  useEffect(() => {
    getActivity.run(page)
  }, [page])
  const goDetail = (id: number) => {
    Taro.navigateTo({ url: `/pages/weiSchool/activityDetail?id=${id}` })
    Taro.setNavigationBarTitle({
      title: "百叶活动详情"
    })
  }
  return (
    <View className={styles.activeList}>
      {
        data.map(item => {
          return <AtCard
            // @ts-ignore
            title={item.activityName}
            // @ts-ignore
            thumb={`${baseURL}${item.picture}`}
            // @ts-ignore
            extra={item.state}
            // @ts-ignore
            onClick={() => goDetail(item.id)}
            extraStyle={
              // @ts-ignore
              item.state === '报名结束' ? { color: '#666666' } : item.state === "已报名" ? { color: '#2196f3' } : { color: '#f44336' }
            }
          >
            {/*@ts-ignore*/}
            <View>{item.content}</View>
            <View>
              {/*@ts-ignore*/}
              {item.activityBlockValue && <AtTag size='small' type='primary' active circle>{item.activityBlockValue}</AtTag>}
              {/*@ts-ignore*/}
              {item.score && <AtTag size='small' type='primary' active circle>{item.score}分</AtTag>}
              {/*@ts-ignore*/}
              {item.numberOfPeople && <AtTag size='small' type='primary' active circle>{item.enrollmentOfPeople}人 / {item.numberOfPeople}人</AtTag>}
            </View>
            {/*@ts-ignore*/}
            <View className={styles.times}>报名时间：{item.enrollStartTime} ~ {item.enrollEndTime}</View>
            {/*@ts-ignore*/}
            <View className={styles.times}>活动时间：{item.startTime} ~ {item.endTime}</View>
          </AtCard>
        })
      }
    </View>
  )
}

export default ActivityList